@charset "utf-8";
@import "reset";
@function r($px){
    @return $px/100*1rem;
}
body{
    font-size: 16px;
    background-color: #222222;
    .search{
        display: flex;
        justify-content: space-between;
        padding-top:r(19);
        padding-bottom: r(16);
        margin-right: r(13);
        margin-left: r(18);
        border-bottom: r(1) solid white;
        .search-l{
            color: #b60005;
            line-height: r(54);
            position: relative;
            .icon-yuan{
            font-size: r(55);
            color: #b60005;
            }
            .icon-cha{
                 color: white;
                 position: absolute;
                 left: r(13);
                 top: 0;
                 font-size: r(30);
             }
        }
        .search-r{
            .bk{
                width: r(537);
                height: r(54);
                box-sizing: border-box;
                position: relative;
                border: 1px solid #d2d2d2;
                border-radius: r(40);
                i{
                   font-size: r(27);
                   line-height: r(54);
                   padding-left: r(17);
                    position: absolute;
                    top: 0;
                    left: 0;
                    color: white;
                }
                input{
                    position: absolute;
                    top: 0;
                    width: r(440);
                    height: r(54);
                    line-height: r(54);
                    left: r(71);
                    color: white;
                    outline: none;
                    border: none;
                    background-color: transparent;
                }
            }
        }
    }
    .center{
        text-align: center;
        color: white;
        margin-top: r(33);
        .center-t{
            position: relative;
                .photo{
                width: r(129);
                height: r(132);
                border: 1px solid transparent;
                border-radius: 50%;
                overflow: hidden;
                margin: 0 auto;
                }
                span{
                    display: block;
                    width: r(34);
                    height: r(34);
                    font-size: r(20);
                    position: absolute;
                    line-height: r(34);
                    text-align: center;
                    border-radius: 50%;
                    top: 0;
                    left:50%;
                    margin-left: r(20);
                    background-color: #ff0000;
                }
        }
        .name{
            margin-top: r(14);
            font-size: r(24);
            p{
                display: inline-block;
                width: r(100);
                text-align: right;
            }
            span{
                margin-left: r(10);
                display: inline-block;
                 padding: r(1) r(10);
                font-size: r(13);
                transform: scale(0.92);
                transform-origin: right;
                border: 1px solid white;
            }
        }
        .score{
            margin-top: r(7);
            margin-bottom: r(13);
            color: #eeca02;
            font-size: r(20);
        }
        .focus{
           
            p{
                display: inline;
                font-size: r(23);
                span{
                    color: #b60005;
                    padding-left: r(9);
                }
            }
            span{
                font-size: r(23);
                
            }

        }
        .key{
            margin-top: r(22);
            input{
                color: white;
                width: r(219);
                height: r(53);
                line-height: r(53);
                background-color: #b60005;
                border: 1px solid transparent;
                border-radius: r(25);
                font-size: r(23);
                &:last-child{
                    margin-left: r(22);
                    background-color: #cdcdcd;
                } 
                &:hover{
                    background-color: #b60005;
                }   
            }

            
        }
    }
    .options{
        margin-top: r(22);
        .hx{
            height: r(24);
            background-color: #303030;
        }
        .choose{
            margin-top: r(5);
                li{
                    position: relative;
                    margin: 0 auto;
                    width: r(576);
                    input{
                        position: absolute;
                        left: 0;
                        top: 0;
                        visibility: hidden;
                        &:checked~.list{
                            max-height: r(180);
                        }
                        &:checked~span{
                            transform: rotate(90deg);
                        }
                    }
                    label{
                        display: block;
                        color: #5f5f5f;
                        font-size: r(23);
                        height: r(90);
                        line-height: r(90);
                        border-bottom: 1px solid #353535;
                    }
                    span{
                        color: #5f5f5f;
                        position: absolute;
                        right: 0;
                        top: 0;
                        line-height: r(90);
                    }
                    .list{
                        text-align: center;
                        overflow: hidden;
                        max-height: 0;
                        transition: all .3s;
                        li{
                            margin: 0 auto;
                            width: r(435);
                            height: r(87);
                            line-height: r(87);
                            border-bottom: 1px solid #353535;
                            a{
                            font-size: r(21);
                            color: #a9a9a9;
                            }
                            &:last-child{
                                border-bottom: 0;
                            }
                        }
                        
                    }
                }
        }
    }

}